<template>
	<scroll-view scroll-y="true" show-scrollbar="false" class="content">

		<view class="bg_box">
			<view class="bg01"></view>
			<view class="assets_box">
				<view class="text_box">
					<view class="title">{{s1}}</view>
					<view class="num">{{y}}</view>
					<!-- <view class="text">奖金池剩余:{{sy}}</view> -->
				</view>
				<view class="text_box">
					<view class="title">{{s2}}</view>
					<view class="num">{{sy}}</view>
					<!-- <view class="text">奖金池剩余:{{sy}}</view> -->
				</view>
					<view class="tips iconfont" @tap.stop="closePupu">&#xe72a;</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="pupu_box" v-show="pupu" @tap.stop="closePupu">
			<view class="show_box" @tap.stop="">		
						<view class="show_content">{{str}}</view>
						<view class="show_menu">
							<view class="menu" @tap.stop="closePupu">确认</view>
						</view>
			</view>
		</view>
		<view class="total_title">
			<view class="line"></view>
			<view class="text">奖金池明细</view>
		</view>
		
		<block v-for="(item, index) in list" :key="'list' + index">
		<view class="list_box">
			<view class="text_box">
				<view class="text">{{item.name}}</view>
				<view class="time">{{item.time}}</view>
			</view>
			<view class="money">{{item.money}}</view>
			
		</view>
		</block>
	
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			pupu:false,
			str:'',
			list:[
				{
					text:'塑料x50.00公斤',
					time:'2020-02-12',
					money:'100'
				},
				{
					text:'塑料x50.00公斤',
					time:'2020-02-12',
					money:'100'
				},
				{
					text:'塑料x50.00公斤',
					time:'2020-02-12',
					money:'100'
				}
			],
			y:0,
			s1:'应分红总量(元)',
			s2:'剩余分红量(元)',
		    sy:0,
			jcsy:0,
			sx:0,
			j:0,
		};
	},
	onLoad(e){
		let me = this;
		
		me.Net._get('jclist',{},(res)=>{
			if(res.code ==1){
				if(e.type==1)
				{
					me.list=res.data.tzlist
				    me.y=res.data.all_tz
				    me.sy=res.data.tz
					me.s1='可分红份数(份)'
					me.s2='已分红量(元)'
					me.str=''
					uni.setNavigationBarTitle({
					title: '公益奖金池' //这是修改后的导航栏文字
					})
				}
				if(e.type==2)
				{
					me.list=res.data.gwlist
				    me.y=res.data.all_gw
				    me.sy=res.data.gw
						me.str=''
					uni.setNavigationBarTitle({
					title: '购物奖金池'//这是修改后的导航栏文字
					})
				}
				if(e.type==3)
				{
					me.list=res.data.yjlist
				    me.y=res.data.all_yj
				    me.sy=res.data.yj
						me.str=''
					uni.setNavigationBarTitle({
					title: '达标奖金池' //这是修改后的导航栏文字
					})
				}
					
				
				console.log(res.data)
			}
		});
	},
	methods: {
		closePupu(){
			let that = this; 
			that.pupu = !that.pupu
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		}
		
	}
};
</script>
<style lang="scss">
page {
	height: 100%;
	padding-bottom: 0 !important;
	background-color: #fff;
}
.content {
	height: 100%;
}

.surplus-content {
	width: 690rpx;
	height: 490rpx;
	margin: 2vw auto 0vw;
	background-image: linear-gradient(#4d726f, #b4eef7);
	background-position: bottom;
	border-radius: 2vw;
	background-repeat: no-repeat;
	position: relative;

	view {
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 40rpx;
		&:nth-child(1) {
			font-size: 28rpx;
			top: 50rpx;
		}
		&:nth-child(2) {
			font-size: 48rpx;
			top: 100rpx;
		}
		&:nth-child(3) {
			font-size: 28rpx;
			top: 50rpx;
			left: 430rpx;
		}
		&:nth-child(4) {
			font-size: 48rpx;
			top: 100rpx;
			left: 430rpx;
		}
		&:nth-child(5) {
			font-size: 28rpx;
			top: 230rpx;
		}
		&:nth-child(6) {
			font-size:48rpx;
			top: 280rpx;
		}
		&:nth-child(7) {
			font-size: 28rpx;
			top: 230rpx;
			left: 430rpx;
		}
		&:nth-child(8) {
			font-size: 48rpx;
			top: 280rpx;
			left: 430rpx;
		}
		&:nth-child(9) {
		   font-size: 28rpx;
		   width: 220rpx;
		   height: 76rpx;
		   background-color: #fff;
		   text-align: center;
		   line-height: 76rpx;
		   border-radius: 40rpx;
		   top: 390rpx;
		   left: 40rpx;
		   color: #036f7c;
		  }
		  &:nth-child(10) {
		   font-size: 28rpx;
		   width: 220rpx;
		   height: 76rpx;
		   background-color: #fff;
		   text-align: center;
		   line-height: 76rpx;
		   border-radius: 40rpx;
		   top: 390rpx;
		   left: 430rpx;
		   color: #036f7c;
		  }
	}
}

.bill-content {
	width: 690rpx;
	margin: 30rpx auto;

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		padding: 24rpx 0;
	}

	.body {
		width: 100%;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 0 4rpx 2rpx #f6f6f6;

		.bill-item {
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f6f7f9;
			&:last-child {
				border-bottom: none;
			}

			.left {
				view {
					font-weight: 500;
					&:nth-child(1) {
						font-size: 30rpx;
						color: #333333;
					}
					&:nth-child(2) {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.right {
				font-size: 30rpx;
				font-weight: 500;
			}

			.red {
				color: #333;
			}
			.black {
				color: #ff4447;
			}
		}
	}
}

.list_box{
	width: 90%;
	margin: 0 auto;
	padding: 3vw 0;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid #e8e8e8;
}

.list_box .text_box{
	flex: 1;
}

.list_box .text_box .text{
	font-size: 3.5vw;
	color: #333;
	font-weight: bold;
}

.list_box .time{
	font-size: 3.2vw;
	color: #999;
	margin-top: 2vw;
}

.list_box .money{
	flex: 1;
	font-size: 4vw;
	color: #333;
	font-weight: bold;
	text-align: right;
}

.moneycolor{
	color: #E1001E !important;
}

.total_title{
	width: 90%;
	margin: 15vw auto 0;
	display: flex;
	align-items: center;
}

.total_title .line{
	width: 2vw;
	height: 6vw;
	border-radius: 2vw;
	background-color: #4d726f;
	margin-right: 2vw;
}

.total_title .text{
	font-size: 4vw;
	color: #333;
	font-weight: bold;
}

.bg_box{
	width: 100%;
	position: relative;
}

.bg_box .bg01{
	width: 100%;
	height: 20vw;
	background-color: #4d726f;
	
}

.bg_box .assets_box{
	width: 90%;
	position: absolute;
	top: 6vw;
	left: calc(50% - 45%);
	background-color: #f8f8f8;
	border: 1px solid #4d726f;
	border-radius: 3vw;
	padding: 4vw 5vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bg_box .assets_box .menu{
	width: 24vw;
	height: 10vw;
	line-height: 10vw;
	background-color: #D20001;
	border-radius: 12vw;
	font-size: 3.5vw;
	color: #fff;
	text-align:center;
	margin-left: 2vw;
}

.bg_box .assets_box .tips{
	color: #D20001;
	font-size: 5vw;
	margin-left: 10vw;
}

.bg_box .assets_box .text_box{
	// flex: 1;
}

.bg_box .assets_box .text_box:nth-child(2){
	margin-left: 10%;
}

.bg_box .assets_box .text_box .title{
	font-size: 3.5vw;
	color: #333;
	text-align: center;
}

.bg_box .assets_box .text_box .num{
	font-size: 6vw;
	color: #333;
	font-weight: bold;
	margin-top: 3vw;
	text-align: center;
}

.bg_box .assets_box .text_box .text{
	font-size: 3.5vw;
	color: #333;
	margin-top: 3vw;
	text-align: center;
}

.pupu_box {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.pupu_box .show_box {
	width: 80%;
	background-color: #fff;
	border-radius: 3vw;
	padding: 4vw;
}

.pupu_box .show_box .show_img{
	width: 100%;
	
}

.pupu_box .show_box .show_img image{
	width: 100%;
	height: 100%;
	display: block;
}

.pupu_box .show_box .show_menu{
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 4%;
}

.pupu_box .show_box .show_menu .menu{
	width: 100%;
	height: 10vw;
	line-height: 10vw;
	text-align: center;
	font-size: 4vw;
	border-radius: 10vw;
	box-sizing: border-box;
	background-color: #4d726f;
	color: #fff;
}

.pupu_box .show_box .show_content{
	font-size: 3.5vw;
	color: #666;
	line-height: 5.5vw;
}

	
	
	
	
	
	
</style>